<!-- 修改技术要求 -->
<template>
  <div id="dialog-container">
    <el-dialog v-dialogDrag title="修改实验技术要求"  append-to-body :close-on-click-modal="false"
      :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show" width="800px">
      <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;top:" @click="isFullScreen = !isFullScreen">
                                                                                                  <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
                                                                                                </button>
      <el-form :model="formData" :inline="true" label-width="130px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件号：">
              <el-input v-model="formData.part_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件图号：">
              <el-input v-model="formData.part_graph_number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件名称：">
              <el-input v-model="formData.part_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料牌号：">
              <el-input v-model="formData.material_no"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件类型：">
              <el-select v-model="formData.name" filterable placeholder="请选择" style="width: 200px;">
                <el-option v-for="item in formData.name" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="难度系数值：">
              <el-input v-model="formData.number" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图纸版本：">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <br>
      <el-row>
        <edit-test-items-button @testData="getTestData" style="display: inline-block;"></edit-test-items-button>
      </el-row>
      <el-table ref="multipleTable" :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="test_type" label="检测类型" min-width="100">
          <template slot-scope="scope">
            <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.test_type" placeholder="请输入内容"></el-input>
            <span v-if="editId!=scope.row.id">{{scope.row.test_type}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="field_name" label="检测项目" min-width="100">
          <template slot-scope="scope">
            <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.field_name" placeholder="请输入内容"></el-input>
            <span v-if="editId!=scope.row.id">{{scope.row.field_name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="test_part" label="检测位置" min-width="100">
          <template slot-scope="scope">
              <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.test_part" placeholder="请输入内容"></el-input>
              <span v-if="editId!=scope.row.id">{{scope.row.test_part}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="standrad_name" label="标尺" min-width="100">
          <template slot-scope="scope">
              <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.standrad_name" placeholder="请输入内容"></el-input>
              <span v-if="editId!=scope.row.id">{{scope.row.standrad_name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="检测设备" min-width="100">
          <template slot-scope="scope">
              <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.address" placeholder="请输入内容"></el-input>
              <span v-if="editId!=scope.row.id">{{scope.row.address}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100">
          <template slot-scope="scope">
              <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.remark" placeholder="请输入内容"></el-input>
              <span v-if="editId!=scope.row.id">{{scope.row.remark}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="" align="center" label="操作" min-width="160">
            <template slot-scope="scope">
              <el-button v-if="editId!=scope.row.id" size="small" @click="handleEdit(scope.row.id)" type="primary" plain>编辑</el-button>
              <el-button v-if="editId==scope.row.id" size="small" @click="editData(scope.row.id)" type="primary" plain>保存</el-button>
              <el-button v-if="editId==scope.row.id" size="small" @click="editId=''">取消</el-button>
              <el-popover placement="top" title="确认删除吗？" width="160" trigger="click" v-model="scope.row.visible">
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.visible=false">取消</el-button>
                  <el-button type="primary" size="mini" @click="deleteData(scope.$index)">确定</el-button>
                </div>
                <el-button v-show="editId!=scope.row.id" size="small" type="danger" slot="reference" plain>删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import TestItemsButton from './edit-test-items-button';
  import { postSavePart, getPartInfo } from 'service/task';
  export default {
    components: {
      'edit-test-items-button': TestItemsButton
    },
    data() {
      return {
        dialogVisible: false,
        formData: {
          part_number: '',
          part_graph_number: '',
          part_name: '',
          material_no: '',

          name: '',
          number: ''
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        editId: ''
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      orderId: {
        type: String
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
        if(this.dialogVisible) {
          getPartInfo(this.orderId)
            .then(res => {
              this.formData.part_number = res.data.result.part_number;
              this.formData.part_graph_number = res.data.result.part_graph_number;
              this.formData.part_name = res.data.result.part_name;
              this.formData.material_no = res.data.result.material_no;
            })
        }
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = false;
      },
      getTestData(val) {
        this.tableData.push(val);
      },
      handleEdit(id) {
        this.editId = id;
      },
      // 删除
      deleteData(index) {
        this.tableData.splice(index, 1);
      },
      // 编辑
      editData(id) {
        this.editId = '';
      },
      saveData() {
        let params = {
          part_number: this.formData.part_number,
          part_graph_number: this.formData.part_graph_number,
          part_name: this.formData.part_name,
          material_no: this.formData.material_no,
          material_furnance_number: '',
          project_no: this.tableData
        }
        postSavePart(params)
          .then(res => {
            if(res.data.success) {
              this.$alert('新增成功！', '提示', {
                type: 'success'
              })
              this.dialogVisible = false;
            }
          })
      }
    }
  }

</script>
